<template>
  <div id="changeNickName">
    <!-- <functional-title
      title="修改昵称"
      :fixed=true
      :border=false
      left-arrow
      @click-left="onClickLeft"
      right-text="保存"
      @click-right="onClickSave"
    ></functional-title> -->
    <van-nav-bar title="修改昵称"
                 :fixed=true
                 :border=false
                 @click-left="onClickLeft"
                 left-arrow
                 @click-right="onClickSave"
                 right-text="保存"
                 style="height:44px" />
    <div style="margin-top:52px">
      <van-cell-group title="请输入昵称">
        <van-field v-model="nickName"
                   clearable
                   ref="field"
                   :placeholder="nickName" />
      </van-cell-group>
    </div>

  </div>
</template>

<script type="text/javascript">
// import FunctionalTitle from '@/components/FunctionalTitle'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 路由传递过来的参数 nickName
      nickName: this.$route.params.nickName
    }
  },
  mounted () {
    this.$refs.field.focus()
  },
  components: {
    // FunctionalTitle
  },
  methods: {
    ...mapMutations(['CHANGE_USER_NICK_NAME']),
    onClickLeft () {
      this.$router.back()
    },
    // 修改昵称
    onClickSave () {
      if (this.nickName.length > 0) {
        let nickName = this.nickName
        this.CHANGE_USER_NICK_NAME({ nickName })
        this.$router.back()
        this.$toast({
          message: '修改成功',
          duration: 800
        })
      } else {
        this.$toast({
          message: '请输入昵称',
          duration: 800
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#changeNickName {
  @include setAllcover(999);
  background-color: $bg-color-page;
}
</style>
